<template>
  <div class="personal-main">
    <div class="personal-pay">
      <h3><i>借款人信息认证</i></h3>

      <el-steps :active="active" style="margin: 40px">
        <el-step title="填写借款人信息"></el-step>
        <el-step title="提交平台审核"></el-step>
        <el-step title="等待认证结果"></el-step>
      </el-steps>
      <div v-if="active === 0" class="user-borrower">
        <h6>个人基本信息</h6>
        <el-form label-width="120px">
          <el-form-item label="年龄">
            <el-col :span="5">
              <el-input v-model="borrower.age" />
            </el-col>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="borrower.sex">
              <el-option :value="1" :label="'男'" />
              <el-option :value="0" :label="'女'" />
            </el-select>
          </el-form-item>
          <el-form-item label="婚否">
            <el-select v-model="borrower.marry">
              <el-option :value="true" :label="'是'" />
              <el-option :value="false" :label="'否'" />
            </el-select>
          </el-form-item>
          <el-form-item label="学历">
            <el-select v-model="borrower.education">
              <el-option v-for="item in educationList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="行业">
            <el-select v-model="borrower.industry">
              <el-option v-for="item in industryList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="月收入">
            <el-select v-model="borrower.income">
              <el-option v-for="item in incomeList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="还款来源">
            <el-select v-model="borrower.returnSource">
              <el-option v-for="item in returnSourceList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <h6>联系人信息</h6>
        <el-form label-width="120px">
          <el-form-item label="联系人姓名">
            <el-col :span="5">
              <el-input v-model="borrower.contactsName" />
            </el-col>
          </el-form-item>
          <el-form-item label="联系人手机">
            <el-col :span="5">
              <el-input v-model="borrower.contactsMobile" />
            </el-col>
          </el-form-item>
          <el-form-item label="联系人关系">
            <el-select v-model="borrower.contactsRelation">
              <el-option v-for="item in contactsRelationList" :key="item.value" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-form>
        <h6>身份认证信息</h6>
        <el-form label-width="120px">
          <el-form-item label="身份证人像面">
            <el-upload :on-success="onUploadSuccessIdCard1" :on-remove="onUploadRemove" :multiple="false" :action="uploadUrl" :data="{ module: 'idCard1' }" :limit="1" list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="身份证国徽面">
            <el-upload :on-success="onUploadSuccessIdCard2" :on-remove="onUploadRemove" :multiple="false" :action="uploadUrl" :data="{ module: 'idCard2' }" :limit="1" list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <h6>其他信息</h6>
        <el-form label-width="120px">
          <el-form-item label="房产信息">
            <el-upload :on-success="onUploadSuccessHouse" :on-remove="onUploadRemove" :multiple="false" :action="uploadUrl" :data="{ module: 'house' }" list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="车辆信息">
            <el-upload :on-success="onUploadSuccessCar" :on-remove="onUploadRemove" :multiple="false" :action="uploadUrl" :data="{ module: 'car' }" list-type="picture-card">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <el-form label-width="120px">
          <el-form-item>
            <el-button type="primary" :disabled="submitBtnDisabled" @click="save">
              提交
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="active === 1">
        <div style="margin-top:40px;">
          <el-alert title="您的认证申请已成功提交，请耐心等待" type="warning" show-icon :closable="false">
            我们将在2小时内完成审核，审核时间为周一至周五8:00至20:00。
          </el-alert>
        </div>
      </div>
      <div v-if="active === 2">
        <div style="margin-top:40px;">
          <el-alert v-if="borrowerStatus === 2" title="您的认证审批已通过" type="success" show-icon :closable="false"> </el-alert>
          <NuxtLink to="/user/apply" v-if="borrowerStatus === 2">
            <el-button style="margin-top:20px;" type="success">
              我要借款
            </el-button>
          </NuxtLink>
          <el-alert v-if="borrowerStatus === -1" title="您的认证审批未通过" type="error" show-icon :closable="false"> </el-alert>
        </div>
      </div>

      <!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    let BASE_API = process.env.BASE_API
    return {
      active: null, //步骤
      borrowerStatus: null,
      submitBtnDisabled: false,
      //借款人信息
      borrower: {
        borrowerAttachList: []
      },
      educationList: [], //学历列表
      industryList: [], //行业列表
      incomeList: [], //月收入列表
      returnSourceList: [], //还款来源列表
      contactsRelationList: [], //联系人关系
      uploadUrl: BASE_API + '/api/oss/file/upload' //文件上传地址
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      try {
        const { data } = await this.$axios.$get('/api/core/borrower/auth/getBorrowerStatus')
        console.log('获取借款人认证状态', data.status)
        this.borrowerStatus = data.status
        //未认证
        if (this.borrowerStatus === 0) {
          this.active = 0
          this.initSelected()
        } else if (this.borrowerStatus === 1) {
          //认证中
          this.active = 1
          // } else if (this.borrowerStatus === 2) {
          //   this.active = 2
          // } else if (this.borrowerStatus === -1) {
          //   this.active = 2
        } else {
          this.active = 2
        }
      } catch (error) {
        console.error('获取数据失败')
        const message = error.response.data.message
        this.$message.error(message)
      }
    },

    async initSelected() {
      try {
        //学历列表
        const { data: education } = await this.$axios.$get('/api/core/dict/findByDictCode/education')
        console.log('教育列表', education)
        this.educationList = education.dictList
        //行业列表
        const { data: industry } = await this.$axios.$get('/api/core/dict/findByDictCode/industry')
        this.industryList = industry.dictList
        //收入列表
        const { data: income } = await this.$axios.$get('/api/core/dict/findByDictCode/income')
        this.incomeList = income.dictList
        //还款来源列表
        const { data: returnSource } = await this.$axios.$get('/api/core/dict/findByDictCode/returnSource')
        this.returnSourceList = returnSource.dictList
        //联系人关系列表
        const { data: relation } = await this.$axios.$get('/api/core/dict/findByDictCode/relation')
        this.contactsRelationList = relation.dictList
      } catch (error) {
        console.error('数据字典获取失败')
        const message = error.response.data.message
        this.$message.error(message)
      }
    },
    async save() {
      //防止表单重复点击提交，把这个按钮禁用掉
      this.submitBtnDisabled = true

      try {
        const { data } = await this.$axios.$post('/api/core/borrower/auth/save', this.borrower)
        this.active = 1
      } catch (error) {
        console.error('保存失败')
        const message = error.response.data.message
        this.$message.error(message)
      }
    },
    onUploadSuccessIdCard1(response, file) {
      this.onUploadSuccess(response, file, 'idCard1')
    },
    onUploadSuccessIdCard2(response, file) {
      this.onUploadSuccess(response, file, 'idCard2')
    },
    onUploadSuccessHouse(response, file) {
      this.onUploadSuccess(response, file, 'house')
    },
    onUploadSuccessCar(response, file) {
      this.onUploadSuccess(response, file, 'car')
    },
    onUploadSuccess(response, file, type) {
      if (response.code === 0) {
        //业务成功，填充borrower.borrowerAttachList列表
        this.borrower.borrowerAttachList.push({
          imageName: file.name,
          imageUrl: response.data.url,
          imageType: type
        })
      } else {
        //业务失败
        this.$message.error(response.data.message)
      }
    },
    async onUploadRemove(file, fileList) {
      console.log('onUploadRemove file', file)
      console.log('onUploadRemove fileList', fileList)
      //调用远程文件删除接口
      try {
        const data = await this.$axios.$delete('/api/oss/file/remove?url=' + file.response.data.url)
        console.log('远程删除文件成功')
        //从this.borrower.borrowerAttachList列表中删除对象
        this.borrower.borrowerAttachList = this.borrower.borrowerAttachList.filter(function(item) {
          return item.imageUrl != file.response.data.url
        })
      } catch (error) {
        //业务失败
        console.log('删除文件失败')
        this.$message.error('删除文件失败')
      }
    }
  }
}
</script>
